<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div class="x-body">
    <div class="layui-row">
        <div class="layui-form layui-form-pane">

            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label">部门名称</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="部门名称" id="dep_name">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">部门描述</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="部门描述" id="dep_des">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">部门位置</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="部门位置" id="dep_area">
                    </div>
                </div>

                <div class="layui-inline">
                    <button class="layui-btn" id="searchBtn">搜索</button>
                </div>
            </div>
        </div>
    </div>

    <table id="departmentlisttableId" lay-filter="departmentlisttable"></table>

    <table class="layui-hide" id="depTable" lay-filter="depTable"></table>


    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius" lay-event="mostDel">批量删除</button>
            <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm" lay-event="addDep">新增部门</button>
        </div>
    </script>

    <script type="text/html" id="barDemo">
        <a title="查看" lay-event="updataDep" href="javascript:;">
            <i class="layui-icon">&#xe63c;</i>
        </a>
    </script>

    <!--新添加/修改部门-->
    <script type="text/html" id="addU">
        <div>
            <form class="layui-form" action="" style="padding-left: 40px;">
                <div class="layui-form-item">
                    <label class="layui-form-label">部门名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="Name" id="Name" lay-verify="required" lay-reqText="请输入部门名称"
                               placeholder="请输入部门名称" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">所属部门</label>
                    <div class="layui-input-inline">
                        <input type="hidden" id="parentdepartmentid" name="ParentDepartmentId" value="">
                        <input type="text" id="tree" lay-filter="tree" class="layui-input" name="title">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">部门地址</label>
                    <div class="layui-input-inline">
                        <input type="text" name="area" id="area" lay-verify="required" lay-reqText="请输入部门地址"
                               placeholder="请输入部门名称" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">部门类型</label>
                    <div class="layui-input-inline">
                        <input type="text" name="type" id="type" lay-verify="required" lay-reqText="请输入部门类型"
                               placeholder="请输入部门名称" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">排序顺序</label>
                    <div class="layui-input-inline">
                        <input type="text" name="Sort" id="Sort" lay-verify="required" lay-reqText="请输入部门类型"
                               placeholder="请输入部门名称" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">详细描述</label>
                    <div class="layui-input-block">
                        <textarea name="Description" id="Description" placeholder="请输入内容"
                                  class="layui-textarea"></textarea>
                    </div>
                </div>


                <input type="hidden" lay-submit lay-filter="formSubmit" id="formSubmit">
            </form>
        </div>
    </script>

</div>
<script>
    //扩展treeSelect功能
    layui.config({
        base: '${pageContext.servletContext.contextPath}/js/'
    }).extend({
        treeSelect: 'treeSelect',
        treetable: 'treetable'
    });

    var parentdepartmentid = "12";

    layui.use(['table', 'jquery', 'form', 'treeSelect', 'treetable'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var treeSelect = layui.treeSelect;
        var treetable = layui.treetable;
        var form = layui.form;

        function renderTable() {
        treetable.render({
            treeColIndex: 1,
            treeSpid: 0,
            treeIdName: 'id',//对应接口中的ID
            treePidName: 'parentDepartmentId',//对应接口中的parentDepartmentId 父ID
            toolbar: '#toolbarDemo',//开启头部工具栏，并为其绑定左侧模板
            treeDefaultClose: false,
            treeLinkage: false,
            elem: '#departmentlisttableId',
            url: '${pageContext.servletContext.contextPath}/dep/findAll',
            page: false,
            id: "tables",
            cols: [[
                {type: "checkbox", fixed: "left", width: 50},
                {field: 'name', title: '部门名', width: 300},
                {field: 'description', title: '描述', align: 'center', width: 200},
                {field: 'sort', title: '排序', align: 'center', width: 200},
                /*{ field : 'status',title : '状态', align : 'center',width : 200 },*/
                {title: '操作', width: 200, fixed: "right", align: "center", templet: '#barDemo'}
            ]],
            done: function () {
                layer.closeAll('loading');
            }
        });
        }

        renderTable();

        <%--var t = table.render({--%>
        <%--    elem: '#depTable'--%>
        <%--    , url: '${pageContext.request.contextPath}/dep/findAll'--%>
        <%--    , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板--%>
        <%--    , title: '用户数据表'--%>
        <%--    , cols: [[--%>
        <%--        {type: 'checkbox', fixed: 'left'}--%>
        <%--        , {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}--%>
        <%--        , {field: 'name', title: '名称', width: 180}--%>
        <%--        , {field: 'area', title: '地区', width: 150}--%>
        <%--        , {field: 'type', title: '类型', width: 150}--%>
        <%--        , {field: 'sort', title: '排序', width: 80, sort: true}--%>
        <%--        , {field: 'description', title: '描述', width: 200}--%>
        <%--        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}--%>
        <%--    ]]--%>
        <%--    , page: true--%>
        <%--    , parseData: function (rs) { //res 即为原始返回的数据--%>
        <%--        return {--%>
        <%--            "code": rs.code, //解析接口状态--%>
        <%--            "msg": rs.msg, //解析提示文本--%>
        <%--            "count": rs.object.total, //解析数据长度--%>
        <%--            "data": rs.object.list //解析数据列表--%>
        <%--        };--%>
        <%--    }--%>
        <%--    , response: {--%>
        <%--        statusCode: 200 //规定成功的状态码，默认：0--%>
        <%--    }--%>
        <%--});--%>

        /*搜索按钮绑定单击事件*/
        $("#searchBtn").click(function () {
            var dep_name = $("#dep_name").val();
            var dep_des = $("#dep_des").val();
            var dep_area = $("#dep_area").val();

            t.reload({
                where: {
                    'name': dep_name,
                    'description': dep_des,
                    'area': dep_area,
                }
            });
        });


        /*监听头工具栏事件*/
        table.on('toolbar(departmentlisttable)', function (obj) {
            var event = obj.event;/*添加客户*/
            if (event == "addDep") {
                /*弹出层 让管理员输入*/
                add();
            }
            /*添加新部门*/
            else if (event == "mostDel") {
                //确认是否有选中的ID
                var checkStatus = table.checkStatus('tables'); //departmentlisttableId 即为 table 对应的 id 属性的值
                var data = checkStatus.data;
                if (data.length == 0) {
                    layer.msg("请先选择要删除的数据！");
                    return false;
                }
                mostDel(data);
            }
        });

        function render() {
            //实现下拉树型数据加载
            treeSelect.render({
                elem: '#tree',//选择器
                data: '${pageContext.servletContext.contextPath}/dep/findChildren?id=0',// 数据
                type: 'get',// 异步加载方式：get/post，默认get
                placeholder: '请选择部门',// 占位符
                search: true,// 是否开启搜索功能：true/false，默认false
                click: function (d) { // 点击回调
                    $("#parentdepartmentid").val(d.current.id);
                    console.log(d.current.id);
                },
                success: function (d) {// 加载完成后的回调函数
                    console.log(d);
                    //选中节点，根据id筛选
                    treeSelect.checkNode('tree', parentdepartmentid);
                    //获取zTree对象，可以调用zTree方法
                    var treeObj = treeSelect.zTree('tree');
                    console.log(treeObj);
                    //刷新树结构
                    treeSelect.refresh();
                }
            });
        }

        /*添加部门方法*/
        function add() {
            /*弹出层*/
            layer.open({
                type: 1,
                content: $("#addU").html(),
                btn: ['提交', '取消'],
                title: "部门新增",
                area: ['700px', '500'],
                btnAlign: 'c',
                yes: function (layero, index) {//点击提交按钮时触发
                    $("#formSubmit").click();
                },
                success: function (layero, index) {//页面弹出成功时触发
                    render();
                    //表单
                    form.render();
                    //表单提交按钮监听
                    form.on('submit(formSubmit)', function (data) {
                        $.get("${pageContext.request.contextPath}/dep/save", data.field, function (rs) {
                            if (rs.code == 200) {
                                layer.msg("添加成功");
                                //让搜索按钮点击
                                //$("#searchBtn").click();
                                renderTable();
                                //关闭弹层
                                layer.close(index);
                                //方法结束
                                return false;
                            }
                            layer.msg(rs.msg);

                        }, "json")
                    });
                }
            })
        }

        /*批量删除*/
        function mostDel(data) {
            var ids = "";
            $.each(data, function (index, value) {
                ids = ids + "id=" + value.id + "&";
            });
            layer.confirm("你确定要删除么", function (index) {
                $.get("${pageContext.request.contextPath}/dep/del", ids, function (rs) {
                    if (rs.code == 200) {
                        layer.msg("删除成功！");
                        //让搜索按钮进行点击  刷新table
                        //$("#searchBtn").click();
                        renderTable();
                        //关闭弹层
                        layer.close(index);
                        //? 停止AJAX 不再执行下面代码
                        return false;
                    }

                    layer.msg(rs.msg);
                    //关闭弹层
                    layer.close(index);
                }, "json")
            });
        }

        //监听行具条
        table.on('tool(departmentlisttable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var event = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            console.log(data);
            if (event == "updataDep") {
                /*弹出一个层*/
                update(data);
            }
        });

        /*部门修改方法*/
        function update(data) {
            /*弹出层*/
            layer.open({
                type: 1,
                content: $("#addU").html(),
                btn: ['提交', '取消'],
                title: "客户信息修改",
                area: ['700px', '500'],
                btnAlign: 'c',
                yes: function (layero, index) {//点击提交按钮时触发
                    $("#formSubmit").click();
                },
                success: function (layero, index) {//页面弹出成功时触发
                    render();
                    //表单赋值 Name area type ParentDepartmentId Description
                    $("#Name").prop("value", data.name);
                    $("#area").prop("value", data.area);
                    $("#type").prop("value", data.type);
                    $("#ParentDepartmentId").prop("value", data.parentDepartmentId);
                    $("#Description").prop("value", data.description);
                    $("#Sort").prop("value", data.sort);

                    //重新渲染组件
                    //表单
                    form.render();

                    //表单提交按钮监听
                    form.on('submit(formSubmit)', function (d) {
                        $.get("${pageContext.request.contextPath}/dep/upd?id=" + data.id, d.field, function (rs) {
                            if (rs.code == 200) {
                                layer.msg("修改成功");
                                //让搜索按钮点击
                                //$("#searchBtn").click();
                                renderTable();
                                //关闭弹层
                                layer.close(index);
                                //方法结束
                                return false;
                            }
                            layer.msg(rs.msg);

                        }, "json")
                    });
                }
            })
        }

    });
</script>
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>

</html>
